<template>
	<view class="">
		<!-- 顶部标题 -->
		<!-- <view class="head_text">
			<text>知识库</text>
		</view> -->
		<!-- 搜索栏 -->
		<view class="search_bar">
			<!-- <view class="search_left" @click="select()"> -->
			<view class="search_left">
				<image src="../../static/client/shaixuan.png" class="search_left_img"></image>
			</view>
			<input class="search_bar_input" v-model="searchInfo" placeholder="标题内容搜索" placeholder-class="search_input_text" />
			<!-- <image @click="handleSearch" src="../../static/client/sousuo.png" class="sousuo_img"></image> -->
			<view class="all_sousuo_img" @click="sousuo_img">
				<image src="../../static/client/sousuo.png"
					style="width: 38rpx;height: 34rpx;margin-top: 20rpx;margin-left: 20rpx;"></image>
			</view>
		</view>

		<!-- 知识库展示条目 -->
		<uni-swipe-action>
			<uni-swipe-action-item v-for="item in knowList" :key="item.id" :right-options="options"
				@click="bindClick(item.id)">
				<view class="client_item" :style="item.item_style"
					@click="tapClientItem(item)">
					<text class="client_item_name">{{item.title}}</text>
					<view class="row2">
						<text class="client_item_person">{{item.member.nickname}}</text>
						<text class="client_item_phone">{{item.member.username}}</text>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <view class="client_item" v-for="item in knowList" :id="item.id" :style="item.item_style"
			@longpress="longTapItem(item)" @click="tapClientItem(item)">
			<text class="client_item_name">{{item.title}}</text>
			<text class="client_item_person">{{item.member.nickname}}</text>
			<text class="client_item_phone">{{item.member.username}}</text>
			<view class="" style="" v-if="item.item_change">
				<view @tap="deleteItem()"
					style="width: 130rpx;height: 140rpx;background: #FF3333;position:absolute;right: -180rpx;color:#FFFFFF;font-size: 28rpx;line-height: 140rpx;text-align: center;">
					删除
				</view>
			</view>
		</view> -->
		<!-- 筛选查询框 -->
		<view class="select_query" v-if="select_query">
			<form @submit="" @reset="">
				<!-- 日期选择器 -->
				<text class="select_query_text">创建时间</text>
				<picker mode="date" @change="bindStartDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input">{{startDate}}</view>
				</picker>
				<view style="width: 15rpx;height: 3rpx; margin-left: 438rpx;margin-top: -30rpx; background: #999999;">
				</view>
				<picker mode="date" @change="bindEndDateChange" style="width:250rpx ;height: 60rpx;">
					<view class="picker_input" style="margin-left: 470rpx;margin-top: -32rpx;">{{endDate}}</view>
				</picker>
				<!-- 项目类型 -->
				<view class="select_query_text" style="margin-top: 62rpx;">项目类型</view>
				<view class="select_input" style="margin-top: -50rpx;" @click="proItemsShow()">
					<text class="select_input_text">{{project_name}}</text>
					<image src="../../static/client/xiala.png" style="width: 20rpx;height: 11rpx;margin-left: 387rpx;">
					</image>
				</view>

				<!-- 项目类型结束 -->
				<!-- 客户性质 -->
				<view class="select_query_text" style="margin-top: 62rpx;">客户性质</view>
				<view class="select_input" style="margin-top: -50rpx;" @click="kehuInfoShow()">
					<text class="select_input_text">{{kehuInfo_name}}</text>
					<image src="../../static/client/xiala.png" style="width: 20rpx;height: 11rpx;margin-left: 439rpx;">
					</image>
				</view>
				<!-- 客户性质结束-->
				<!-- 模糊查询 -->
				<view class="select_query_text" style="margin-top: 62rpx;">模糊查询</view>
				<input type="text" class="select_input" name="input" style="margin-top: -45rpx;"
					placeholder="请输入" v-model="searchInfo"
					placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;" />
				<!-- 模糊查询结束 -->
				<!-- 取消确定按钮 -->
				<view style="margin-top: 65rpx;">
					<button class="query_button_cancel" style="">取消</button>
					<button class="query_button_confirm" style="">确定</button>
				</view>
				<!-- 项目类型下拉列表 -->
				<view class="project_item" v-if="proItemShow">
					<view class="item_info" :style="item.styl" v-for="(item,index) in project_items" :key='item.id'
						@tap="tapProItem(item,index)">
						<text style="margin-left: 21rpx;">{{item.project_name}}</text>
					</view>
				</view>
				<!-- 客户性质下拉列表 -->
				<view class="project_item" style="height: 180rpx;top: 343rpx;" v-if="kehuInfo">
					<view class="item_info" :style="item.styl" v-for="item in kehuItem_info" @tap="tapKehuItem(item)">
						<text style="margin-left: 21rpx;">{{item.kehuItem}}</text>
					</view>
				</view>
			</form>
		</view>
		<!-- 筛选查询框结束 -->

		<!-- 右下添加按钮 -->
		<view class="add_client">
			<image src="../../static/client/tianjia.png" style="width: 137rpx;height: 137rpx;" @click="addKnows()">
			</image>
		</view>
		<!-- 加载更多 -->
		<view style="width: 100%;height: 100rpx;">
			<uni-load-more :status="status" iconType="auto" @clickLoadMore="getMoreKnows"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				token: '',
				member_id: '',
				company_id: '',
				knowList: [],
				searchInfo: '',
				pageNum: 0,
				pageSize:10,
				currentPage:1,
				totle: 0,
				status: 'more', //加载更多状态
				startDate: '开始时间',
				endDate: '结束时间',
				select_query: false, //控制筛选查询框是否显示
				project_name: '双重预防',
				kehuInfo_name: '全部',
				proItemShow: false, //控制项目类型选择显示
				kehuInfo: false, //控制客户性质选择显示
				client_item_change: false, //长按条目
				kehuItem_info: [{
						styl: 'background: #40A0F2;color: #FFFFFF;border-radius: 10px 10px 0 0;',
						kehuItem: '全部'
					},
					{
						styl: '',
						kehuItem: '个人'
					},
					{
						styl: '',
						kehuItem: '公司'
					}
				],

				project_items: [ //项目类型选项
					{
						styl: 'background: #40A0F2;color: #FFFFFF;border-radius: 10px 10px 0 0;',
						project_name: '双重预防',
						id: 0
					},
					{
						styl: '',
						project_name: '现状评价',
						id: 1
					},
					{
						styl: '',
						project_name: '预评价',
						id: 2
					},
					{
						styl: '',
						project_name: '验收评价',
						id: 3
					},
					{
						styl: '',
						project_name: '应急预案',
						id: 4
					}
				],

				client_items: [{
						client_id: 'c123456', // 客户id
						client_name: '2020年*********************法律相关规定', // 信息名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: '',
						item_change: false
					},
					{
						client_id: 'c123456', // 客户id
						client_name: '2020年*********************法律相关规定', // 信息名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: ''
					},
					{
						client_id: 'c123456', // 客户id
						client_name: '2020年*********************法律相关规定', // 信息名称
						client_person: '张萌萌', // 客户联系人
						client_phone: '18877778888', // 客户联系人电话
						item_style: ''
					}
				],
				knows_item: {
					client_id: 'c123456', // 客户id
					client_name: '2020年*********************法律相关规定', // 信息名称
					client_person: '111', // 客户联系人
					client_phone: '18877778888', // 客户联系人电话
					item_style: ''
				}
			}
		},
		onShow() {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
			this.currentPage=1
			this.knowList=[]
			this.status='more' 
			this.hidePhonenum()
			this.getKnowList()
		},
		async onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || ''
			this.member_id = uni.getStorageSync('btlh_process_member_id') || ''
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || ''
		},

		methods: {
			handleSearch(){
				// this.pageNum=0
				this.currentPage=1
				this.knowList=[]
				this.status='more' 
				this.getKnowList()
			},
			bindClick(id, e) {
				uni.showModal({
					title: '提示',
					content: '确定删除此条知识库吗？',
					success: async (res) => {
						if (res.confirm) {
							// 删除
							const {
								data: res
							} = await this.$myRequest({
								url: 'Knowledge/del',
								method: 'POST',
								data: {
									member_id: this.member_id,
									token: this.token,
									company_id: this.company_id,
									kid:id,
								},
					
							})
							if (res.code != 200) return uni.showToast({
								title: res.datas.msg,
								icon: 'none'
							})
							uni.showToast({
								title: res.datas.msg,
								icon: 'none'
							})
							this.currentPage=1
							this.knowList=[]
							this.status='more' 
							this.getKnowList()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 获取知识库列表
			async getKnowList() {
				const {
					data: res
				} = await this.$myRequest({
					url: 'Knowledge/index',
					method: 'POST',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						search: this.searchInfo,
						p: this.currentPage,
						p_count: this.pageSize,
					},

				})
				if (res.code != 200) return uni.showToast({
					title: res.datas.msg,
					icon: 'none'
				})
				// this.knowList = res.datas.listInfo
				this.knowList = [...this.knowList,...res.datas.listInfo];
				this.totle = parseInt(res.datas.count)
				// if (this.totle <= this.knowList.length) {
					
				// 	this.status = 'noMore';
				// }
				console.log('知识库列表', this.knowList)
			},
			/* 
			 加载更多知识库条目
			 */
			getMoreKnows() {
				if (this.totle > this.knowList.length) {
					this.status = 'loading';
					// this.pageNum++
					this.currentPage++
					this.getKnowList(); //执行的方法
					this.status = 'more';
				} else { //停止加载
					this.status = 'noMore'
				}
			},
			/* 
			 删除条目
			 */
			deleteItem() {
				uni.showModal({
					title: '提示',
					content: '确定删除此条知识库吗？',
					
				})
			},
			/* 
			 点击前往添加客户
			 */
			addKnows() {
				uni.navigateTo({
					url: '/pages/know/addKnows'
				})
			},
			/* 
			 tap点击客户条目
			 */
			tapClientItem(item) {
				console.log(item)
				if (item.id ) {
					uni.navigateTo({
						url: `/pages/know/lookKnows?knowId=${item.id}`
					})
				} 


			},
			/* 
			 长按客户条目
			 */
			longTapItem(item) {
				item.item_style = 'left: -180rpx;'
				item.item_change = true
			},
			/*
			 点击选择客户性质
			 */
			tapKehuItem(item) {
				this.kehuInfo_name = item.kehuItem
				this.kehuInfo = false
			},
			/* 
			 客户性质选择是否显示
			 */
			kehuInfoShow() {
				this.kehuInfo = !this.kehuInfo
			},
			/* 
			 点击选择项目类型
			 */
			tapProItem(item, index) {
				this.project_name = item.project_name
				this.proItemShow = false
			},
			/* 
			 项目类型选择是否显示
			 */
			proItemsShow() {
				this.proItemShow = !this.proItemShow
			},
			/* 
			更改开始时间
			 */
			bindStartDateChange(e) {
				this.startDate = e.target.value
			},
			/*
			更改结束时间
			 */
			bindEndDateChange(e) {
				this.endDate = e.target.value
			},
			/* 
			 点击筛选查询按钮显示查询框
			 */
			select() {
				this.select_query = !this.select_query
			},
			/* 
			 隐藏手机号中间字符
			 */
			hidePhonenum() {
				for (let i = 0; i < this.client_items.length; i++) {
					let phone = this.client_items[i].client_phone
					this.client_items[i].client_phone = phone.slice(0, 3) + '****' + phone.slice(-4)
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.project_item {
		width: 550rpx;
		height: 296rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10px;
		position: absolute;
		top: 227rpx;
		right: 25rpx;


		.item_info {
			width: 100%;
			height: 60rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 60rpx;
		}
	}

	.query_button_confirm {
		width: 375rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #40A0F2 0%, #128BF1 100%);
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 0;
		margin-right: 0;
		margin-top: -80rpx;
	}

	.query_button_cancel {
		width: 385rpx;
		height: 80rpx;
		border-radius: 0px;
		margin-left: 0;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.select_input {
		width: 530rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1rpx solid #DFDFDF;
		border-radius: 10px;
		margin-left: 170rpx;
		line-height: 60rpx;
		padding-left: 22rpx;

		.select_input_text {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.picker_input {
		width: 250rpx;
		height: 60rpx;
		background: #FFFFFF;
		border: 1px solid #DFDFDF;
		border-radius: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 60rpx;
		text-align: center;
		margin-left: 170rpx;
		margin-top: -48rpx;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.select_query {
		width: 100%;
		height: auto;
		background: #FFF;
		position: absolute;
		top: 225rpx;
		padding-top: 56rpx;
		box-shadow: 1px 3px 15px 0px rgba(3, 70, 126, 0.2);

		.select_query_text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
		}
	}

	.add_client {
		width: 137rpx;
		height: 137rpx;
		position: fixed;
		left: 592rpx;
		bottom: 120rpx;
		z-index: 5;
	}

	.client_item {
		width: 100%;
		height: 140rpx;
		border-bottom: 5rpx solid #F7F7F7;
		position: relative;
		overflow: hidden;

		.client_item_name {
			display: block;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-left: 30rpx;
			margin-top: 25rpx;
		}

		.row2 {
			display: flex;
			margin-top: 10rpx;
			.client_item_person {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #128BF1;
				margin-left: 30rpx;
			}

			.client_item_phone {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				margin-left: 20rpx;
			}
		}

	}

	.search_left_img {
		width: 46rpx;
		height: 36rpx;
		padding: 28rpx 30rpx;
	}

	.search_left {
		width: 106rpx;
		height: 92rpx;
		background: #40A0F2;
	}

	.search_bar {
		width: 100%;
		height: 92rpx;
		position: relative;
		border-bottom: 20rpx solid #F7F7F7;

		.search_bar_input {
			width: 450rpx;
			height: 72rpx;
			background: #F7F7F7;
			border: 1rpx solid #F7F7F7;
			border-radius: 36rpx 0 0 36rpx;
			margin-left: 136rpx;
			position: absolute;
			top: 10rpx;
			padding-left: 20rpx;
			// box-sizing: border-box;
			.search_input_text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #B2B2B2;
				line-height: 37px;
				margin-left: 31rpx;
			}
		}

		.sousuo_img {
			width: 38rpx;
			height: 34rpx;
			position: absolute;
			top: 28rpx;
			left: 650rpx;
			z-index: 99;
		}
	}

	.head_text {
		width: 100%;
		height: 128rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 128rpx;
		text-align: center;
		border: 1rpx solid #F7F7F7;

	}
</style>
